<template>
  <div class="line-deal">
    <div>
      <div id="head" class="f-sb-c">
        <el-tooltip effect="dark" content="订单编号" placement="top">
          <div>1232323</div>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          :content="timeToolTip"
          placement="top"
          v-if="isShowTimeToolTip"
        >
          <div>2020-01-02 23:32:12</div>
        </el-tooltip>
        <!-- <el-tooltip effect="dark" content="订单总价" placement="top">
          <div><b>￥1234.00</b></div>
        </el-tooltip> -->
        <div id="btns" class="f-c-c">
          <el-button
            size="mini"
            type="primary"
            @click="againBuy"
            v-show="isShowAgainBuyBtn"
            >再次购买</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="nowPay"
            v-show="isShowPayBtn"
            >立即付款</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="hintSend"
            v-show="isShowHintBtn"
            >提醒发货</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="confirmGet"
            v-show="isShowGetBtn"
            >确认收货</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="backGoods"
            v-show="isShowBackBtn"
            >退货/退款</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="closeDeal"
            v-show="isShowCloseBtn"
            >关闭订单</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="nowComment"
            v-show="isShowEvaluateBtn"
            >立即评价</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="addToCart"
            v-show="isShowAddCartBtn"
            >加入购物车</el-button
          >
        </div>
      </div>
      <div id="body" class="f-sa-c">
        <div class="left f-c-sb-c">
          <div class="f-sb-s box" v-for="(item, ind) in 2" :key="ind">
            <router-link to="/">
              <el-image
                id="img"
                style="width: 90px; height: 90px"
                :src="imgSrc"
                fit="cover"
              ></el-image
            ></router-link>
            <div id="title" class="f-sb-fs-c">
              <router-link to="/"
                >这里是标题内容这标题内容这标题内容这里是标题内容这内容这标题内容</router-link
              >
              <b class="price">￥1234.00</b>
            </div>
            <div id="option" class="f-sa-c-c">
              <el-tooltip effect="dark" content="套餐类型" placement="top">
                <span class="btn">套餐一</span>
              </el-tooltip>
              <el-tooltip effect="dark" content="机身颜色" placement="top">
                <span>绚丽橙</span>
              </el-tooltip>
              <el-tooltip effect="dark" content="存储容量" placement="top">
                <span>4+64G</span>
              </el-tooltip>
              <el-tooltip effect="dark" content="选购数量" placement="top">
                <span>x1</span>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="right f-sb-c">
          <div id="total" class="f-c-c">
            <el-tooltip effect="dark" content="订单总价" placement="top">
              <b class="price">￥1234.00</b>
            </el-tooltip>
          </div>
          <div id="note" class="f-c-c-c">
            <el-input
              type="textarea"
              rows="4"
              placeholder="请输入备注内容"
              maxlength="30"
              show-word-limit
              size="mini"
              resize="none"
              v-model="note"
              :disabled="disabled"
            ></el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LineDeal",
  props: {
    tabName: {
      type: String,
      default: "hasClose",
    },
  },
  components: {},
  data() {
    return {
      note: "",
      imgSrc: require("@/public/img/defaultGoods.png"),
    };
  },
  computed: {
    isShowTimeToolTip() {
      return (
        ["hasClose", "waitComment", "hasComment"].includes(this.tabName) &&
        this.$route.path != "/confirmOrder"
      );
    },
    timeToolTip() {
      return this.tabName == "hasClose" ? "关闭时间" : "成交时间";
    },
    isShowPayBtn() {
      return this.tabName == "waitPay";
    },
    isShowHintBtn() {
      return this.tabName == "waitSend";
    },
    isShowGetBtn() {
      return this.tabName == "waitGet";
    },
    isShowBackBtn() {
      return (
        this.tabName == "waitSend" ||
        this.tabName == "waitSend" ||
        this.tabName == "waitGet"
      );
    },
    isShowCloseBtn() {
      return this.tabName == "waitPay";
    },
    isShowEvaluateBtn() {
      return this.tabName == "waitComment";
    },
    isShowAgainBuyBtn() {
      return (
        this.tabName == "waitComment" ||
        this.tabName == "hasComment" ||
        this.tabName == "hasClose"
      );
    },
    isShowAddCartBtn() {
      return this.tabName == "hasComment" || this.tabName == "hasClose";
    },
    disabled() {
      return this.$route.path != "/confirmOrder";
    },
  },
  methods: {
    againBuy() {},
    nowPay() {},
    hintSend() {},
    confirmGet() {},
    backGoods() {},
    closeDeal() {},
    nowComment() {},
    addToCart() {},
  },
};
</script>
<style lang="scss" scoped>
.line-deal {
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: $border-radius-base;
}
.price {
  color: $rmb-color;
}
#head {
  height: 40px;
  padding: 0 1em;
  font-size: 14px;
  background: $background-color-dark;
  div:nth-child(1) {
  }
  div:nth-child(2) {
    color: $color-text-secondary;
  }
  div:nth-child(3) {
    b {
      font-size: 16px;
    }
  }
}
#body {
  padding: 8px 0;
  background: $background-color-base;
  .left {
    width: 53%;
    .box:not(:last-child) {
      border-bottom: 1px dashed $border-color-lighter;
    }
  }
  .right {
    width: 42%;
  }
}
#title {
  box-sizing: border-box;
  font-size: 16px;
  padding: 0 10px 5px;
  box-sizing: border-box;
  a {
    font-weight: bolder;
    @include text-ellipsis(3);
  }
}
#option {
  color: $color-text-secondary;
  width: 60px;
  span {
    font-size: 14px;
  }
  b {
    font-size: 14px;
  }
}
#total {
  width: 90;
}
#note {
  width: 220px;
  span {
    margin-bottom: 5px;
  }
}
#btns {
  .el-button {
    margin-left: 10px;
  }
}
</style>